<template>
  <div style="width:100%;height:100%"></div>
</template>

<script>
import * as echarts from 'echarts';
import { applyFilter } from '@turf/turf';
export default {
  data () {
    return {
    }
  },
  props: {
    chartFun: {
      type: Function
    },
    chartData: {
      type: [Array, Object]
    },
    isActive: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    chartData: {
      handler () {
        this.charts.clear()
        this.setDefault()
      },
      deep: true
    }
  },
  methods: {
    setDefault () {
      if (this.isEmptyObj(this.chartData)) {
        let option = this.chartFun(this.chartData, echarts);
        this.charts.setOption(option);
      }
      else {
        let option = this.chartFun([], echarts);
        this.charts.setOption(option);
      }
      if (this.isActive) {
        this.charts.dispatchAction({
          type: 'downplay',
          seriesIndex: 1,
          dataIndex: 1
        })
        this.charts.dispatchAction({
          type: 'highlight',
          seriesIndex: 1,
          dataIndex: 0
        })
      }

    },
    isEmptyObj (obj) {
      for (let item in obj) {
        return true
      }
      return false
    }
  },
  mounted () {
    this.charts = echarts.init(this.$el, "light");

    let vm = this;
    vm.$nextTick(() => {
      window.addEventListener("resize", () => {
        vm.charts.resize();
      });
    });
    vm.charts.on('click', params => {
      this.$emit('chartsClick', params)
    })
    vm.charts.on("mouseout", params => {
      if (this.isActive) {
        this.charts.dispatchAction({
          type: 'highlight',
          seriesIndex: 1,
          dataIndex: 0
        })
      }

      this.$emit("chartsMouseout", params);
    });
    vm.charts.on("mouseover", params => {
      if (this.isActive) {
        this.charts.dispatchAction({
          type: 'downplay',
          seriesIndex: 1,
          dataIndex: 0
        })
      }
      this.$emit("chartsMouseover", params);
    });


    this.setDefault()
  },
  destroyed () {
    if (this.request) {
      this.request.abort()
    }
  }
};
</script>
